<script setup lang="ts">
import { ref } from 'vue'
import { Icon, Loading } from 'vant'

interface WebBrowserProps {
  title?: string;
  url?: string;
}

const props = defineProps<WebBrowserProps>()

const emit = defineEmits(['close'])

const loading = ref(true)
const iframeRef = ref<HTMLIFrameElement | null>(null)

const handleBack = () => {
  emit('close')
}

const handleLoad = () => {
  loading.value = false
}

const safeUrl = () => {
  if (!props.url) return ''
  try {
    const urlObj = new URL(props.url)
    return urlObj.toString()
  } catch (e) {
    return ''
  }
}

const formatTitle = () => {
  if (!props.title) return '外部网站'
  if (props.title.length > 20) {
    return props.title.substring(0, 20) + '...'
  }
  return props.title
}
</script>

<template>
  <div class="web-browser">
    <div class="browser-header">
      <div class="back-button" @click="handleBack">
        <Icon name="arrow-left" size="20" />
      </div>
      <div class="title">{{ formatTitle() }}</div>
      <div class="browser-controls">
        <div class="browser-icon">
          <Icon name="share-o" size="18" />
        </div>
        <div class="browser-icon">
          <Icon name="replay" size="18" />
        </div>
      </div>
    </div>

    <div class="browser-content">
      <div v-if="loading" class="loading-container">
        <Loading type="spinner" color="#4080ff" size="36" />
        <span>网页加载中...</span>
      </div>
      <iframe v-if="url" ref="iframeRef" :src="safeUrl()" frameborder="0" @load="handleLoad"></iframe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.web-browser {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;

  .browser-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;

    .back-button {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 12px;

      &:active {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }

    .title {
      flex: 1;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .browser-controls {
      display: flex;

      .browser-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #666;

        &:active {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  .browser-content {
    flex: 1;
    position: relative;

    .loading-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      background-color: #f9f9f9;
      z-index: 5;

      span {
        color: #666;
        font-size: 16px;
      }
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
  }
}
</style>
